// var xmlHttpRequest;
// function createXMLHttpRequest() {
//     if(window.XMLHttpRequest) {
//         xmlHttpRequest = new XMLHttpRequest();
//     } else if(window.ActiveObject) {
//         xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
//     } else {
//         xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
//     }
// }
//
// function showInform(categoryId) {
//     console.log(categoryId);
//     let realName = categoryId.toUpperCase();
//     console.log(realName);
//     sendRequest("categoryShowJs?categoryId=" + realName);
// }
//
// function sendRequest(url) {
//     createXMLHttpRequest();
//     console.log('1');
//     xmlHttpRequest.onreadystatechange = processResponse;
//     xmlHttpRequest.open("GET",url,true);
//     xmlHttpRequest.send(null);
// }
//
// function processResponse() {
//     console.log('2')
//     if (xmlHttpRequest.readyState === 4) {
//         console.log('3');
//         console.log(xmlHttpRequest.status);
//         if (xmlHttpRequest.status === 200) {
//             console.log('4')
//             var resp = xmlHttpRequest.responseText;
//             //显示悬浮层
//             var inform = document.getElementById("inform");
//             inform.innerText = resp;
//             inform.style.display = "block";
//         }
//     }
// }
//
// //隐藏悬浮层
// function hiddenInform(event){
//     var informDiv = document.getElementById('inform');
//     var x=event.clientX;
//     var y=event.clientY;
//     var divx1 = informDiv.offsetLeft;
//     var divy1 = informDiv.offsetTop;
//     var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
//     var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
//     if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
//         document.getElementById('inform').style.display='none';
//     }
// }

// $(function () {
//     $('.pic').mouseenter(function (){
//         let $this       = $(this),
//             categoryId  = $this.data('action');
//         // 这里为什么不能直接dataset.action? 不懂
//         console.log(categoryId);
//         $.ajax({
//             type    : 'GET',
//             url     : 'categoryShowJs?categoryId=' + categoryId,
//             success : function (data){
//                 $('#inform').text(data);
//             },
//             error   : function (errorMsg) {
//                 console.log(errorMsg);
//             }
//         });
//     });
//     $('.pic').mouseleave(function (){
//         $('#inform').text('');
//     });
// });


$(function (){
    $('#productShow').on('click','.categoryItem',function (){
        var categoryid=$(this).data('categoryid');
        console.log(categoryid);
        $.ajax({
            type   :'GET',
            url    :'http://localhost:8080/project_store_Web_exploded/categoryShowJs?categoryid='+categoryid,
            success :function(data){
                console.log(data);
                var productListHTML = '';
                productListHTML += '<div class="button-container">'+'<button id="back">Back</button>'+'</div>'
                for( var i = 0;i <data.length; i++){

                    productListHTML += '<div class="card">';
                    productListHTML +='<div class="content">';
                    productListHTML += '<h2>'+data[i].description+'</h2>'
                    productListHTML += '<h3>'+data[i].name+'</h3>'
                    productListHTML += '<p>'+data[i].productId+'</p>'
                    productListHTML += '<a href="productForm?productId='+data[i].productId+'">Read More</a>'
                    productListHTML += '</div></div>';
                }

                $('.container').html(productListHTML);
                $('#MainImageContent').hide();
                $('#ShowBox').show();
            },
            error  :function (errorMsg){
                console.log(errorMsg);
            }
        });
    });
    $('.container').on('click','#back',function (){
        $('#ShowBox').hide();
        $('#MainImageContent').show();
    });

});